<template>
  <div>
    <h2>深入v-model</h2>

    <input type="text" v-model="msg">
    <span>我爱你{{msg}}</span>
    <br>
    <!-- v-model的本质 -->
    <input type="text" :value="msg" @input="msg = $event.target.value">
    <span>我爱你{{msg}}</span>


    <!-- <CustomInput :value="msg" @input="msg = $event"></CustomInput> -->
    <CustomInput v-model="msg"></CustomInput>

    <!-- ($event)=>{
      test($event)
    }

    ($event,...args) => {
      test(...ar)
    } -->

    <!-- 1、在父组件当中通过:value绑定msg数据，由于是在组件标签身上，所以是props属性传递 
         2、在子组件当中通过props声明接受到父组件传递过去的value，就可以在子组件当中去使用
         3、在父组件当中给子组件标签绑定自定义事件@input="msg = $event"
         4、在子组件当中绑定input事件，触发input之后，再去触发自定义事件，把子组件当中
            最新的input数据，传递到父组件当中
         5、父组件拿到子组件传递的最新数据，把msg修改
         6、父组件msg一旦改变，第一步给子组件传递的value就会重新传递渲染，子里面的value就会发生改变
    -->

    <!-- 最终实现父子双向数据同步 -->
    
    <el-input :value="msg" @input="msg = $event"></el-input>

    <br>
  </div>
</template>

<script type="text/ecmascript-6">
  import CustomInput from './CustomInput.vue'
  export default {
    name: 'ModelTest',
    data(){
      return {
        msg:'赵丽颖'
      }
    },
    components: {
      CustomInput
    },
    methods:{
      test(a){
        this.msg = a
      }
    }
  }
</script>
